<template>
	<view>
		<uni-nav-bar :statusBar="true" left-icon="left" backgroundColor="rgba(0,0,0,0)" :border="false">
			<view slot="right">
				<view class="right-text" @click="toOpen">开店</view>
			</view>
		</uni-nav-bar>
		<view class="login-content">
			<view class="login-type">
				<view :class="current == 1?'login-type-selelct':''" @click="current = 1">密码登陆</view>
				<view class="lines"></view>
				<view :class="current == 0?'login-type-selelct':''" @click="current = 0">验证码登陆</view>
			</view>
			<view class="login-input-content">
				<view class="password-content input-box" v-show="current == 1">
					<view class="input-lines">
						<view class="title">账号</view>
						<input class="input" v-model="loginData.account" type="number" placeholder="输入手机号" placeholder-class="input-place"/>
					</view>
					<view class="input-lines" placeholder="6-16位必须含数字、字母" placeholder-class="input-place">
						<view class="title">密码</view>
						<input class="input" :password="ispassword" v-model="loginData.pas" type="number" placeholder="6-16位必须含数字、字母" placeholder-class="input-place"/>
						<image class="look-icon" @click="ispassword = !ispassword"
							src="../../static/login/look.png" mode=""></image>
					</view>
				</view>
				<view class="code-content input-box"  v-show="current == 0">
					<view class="input-lines">
						<view class="title">手机号</view>
						<input class="input" v-model="loginData.account"  type="number" placeholder="输入手机号" placeholder-class="input-place"/>
					</view>
					<view class="input-lines">
						<view class="title">验证码</view>
						<input class="input" v-model="loginData.code" type="number" placeholder="输入短信验证码" placeholder-class="input-place"/>
						<!-- <button :class="tit" :disabled="codedisabled" @click="sendCode">获取验证码</button> -->
						<button plain v-if="!isSend" class="sen-code-btn" @click="sendCode">{{sendcodetext}}</button>
						<view v-if="isSend" class="sen-code-btn success-send">{{sendcodetext}}</view>
					</view>
				</view>
				<button :class="loginData.account|| loginData.phone ?'login-btn selectLogin':'login-btn'" @click="login" :disabled="logindisabled">登录</button>
			</view>
		</view>
		<view class="box-content">
			<view class="hint-text">
				首次登陆需要先申请开店
			</view>
			<view class="agremment">
				<uni-icons v-if="checked" @click="checked = !checked" color="#EE972D" type="checkbox-filled" :size="20"></uni-icons>
				<uni-icons  v-else  @click="checked = !checked" color="#EE972D" type="circle" :size="20"></uni-icons>
				<view class="agremment-text" >
					登录即代表您已同意<navigator url="/pages/agreement/privacyAgreement">《乐附近商家隐私政策》</navigator>及<navigator url="/pages/agreement/userAgreement">《用户服务协议》</navigator>
				</view>
			</view>
		</view>
		

	</view>
</template>

<script>
	var time = 60;
	let t1;
	export default {
		data() {
			return {
				 current:1,
				 checked:false,//协议标识,
				 codedisabled:false,//验证码 dis
				 logindisabled:false,//登录 dis
				 isSend:false,//是否发送验证码
				 sendcodetext:"发送验证码",
				 typeList: [{
				 	"name": "验证码",
				 	'scene': 'mobile',
				 	id: 0,
				 }, {
				 	"name": "账号密码",
				 	'scene': 'account',
				 	id: 1,
				 }],
				 loginData:{
					 account:"",
					 phone:"",
					 pas:"",
					 code:""
				 },
				 ispassword:true,
				 cid:""
			}
		},
		onLoad() {
			var that = this
			// #ifdef APP
			uni.getPushClientId({
				success:res=>{
					that.cid = res.cid
				}
			})
			// #endif
			
		},
		methods: {
			toOpen(){
				uni.navigateTo({
					url:'/pages/setupShop/setupShop'
				})
			},
			sendCode() {
				let that = this
				if (this.$util.phoneVerify(this.loginData.account)) {
					this.isSend = true
					this.request.httpTokenRequest({
						url: "index/sendSms",
						method: "post"
					}, {
						scene: "101",
						mobile: that.loginData.account
					}).then(function(data) {
						if (data.code == 0) {
							t1 = setInterval(() => {
								if (time <= 0) {
									clearInterval(t1)
									time = 60
									that.sendcodetext = '重新获取'
									that.isSend = false
			
								} else {
									--time
									that.sendcodetext = time + 's'
								}
							}, 1000)
						} else {
							that.$util.mag(res.msg)
							that.isSend = false
							clearInterval(t1)
						}
					})
				}
			
			},
			login() {
				var that = this
				if (!this.checked) {
					this.$util.msg("请先确认并同意《服务条款》和《隐私协议》")
					return
				}
				// this.isDisabled = true
				this.request.httpTokenRequest({
					url: "login/login",
					method: "post"
				}, {
					scene: this.typeList[this.current].scene,
					account: this.loginData.account,
					password: this.current == 0?'':this.loginData.pas,
					code:this.current == 0?this.loginData.code:'',
					store_cid:this.cid?this.cid:''
				}).then(res => {
					if (res.code == 0) {
						uni.setStorage({
							key: 'token',
							data: res.data.token,
							success: function() {
							}
						});
						if(res.data.userInfo.store_id <= 0){
							this.$util.msg("暂未开通店铺，请先开店")
							return
						}else{
							uni.setStorage({
								key: 'shopid',
								data: res.data.userInfo.store_id,
								success: function() {
								}
							});
							uni.reLaunch({
								url:'/pages/index/index'
							})
						}
					} else {
						this.$util.msg(res.msg)
						return
					}
			
				}, error => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.right-text {
		font-size: 34rpx;
		color: #EE972D;
	
	}
	button{
		border: 0;
		padding: 0;
		margin: 0;
		background-color: rgba(0, 0, 0, 0);
	}
	button::after{
		border: 0;
	}
	//
	.login-content{
		// text-align: center;
		margin: 89rpx auto 0;
		padding: 0 30rpx;
		// tab ---
		.login-type{
			display: flex;
			align-items: center;
			font-size: 34rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #818181;
			line-height: 48rpx;
			justify-content: center;
			.lines{
				width: 1rpx;
				height: 30rpx;
				background-color:  #979797;
				margin: 0 30rpx;
			}
			.login-type-selelct{
				font-size: 34rpx;
				font-weight: 600;
				color: #000000;
				line-height: 48rpx;
			}
		}
		//输入框
		.login-input-content{
			background: #FFFFFF;
			border-radius: 8rpx;
			padding: 30rpx;
			margin-top: 34rpx;
			.input-box{
				// padding:  0;
				.input-lines{
					display: flex;
					align-items: center;
					height: 90rpx;
					line-height: 90rpx;
					border-bottom: 1rpx solid #F5F7F8;
					.title{
						font-size: 30rpx;
						font-weight: 400;
						color: #383838;
						line-height: 90rpx;
						margin-right: 45rpx;
						flex: 0 0 auto;
					}
					.input{
						flex: 0 0 auto;
						max-width: 50%;
					}
					.input-place{
						font-size: 28rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #9C9C9C;
					}
					.sen-code-btn,.success-send{
						font-size: $uni-font-size-lg;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #EE972D;
						line-height: 40rpx;
					}
					.look-icon{
						width: 30rpx;
						height: 20rpx;
						margin-left: auto;
					}
				}
			}
			.login-btn{
				width: 630rpx;
				height: 77rpx;
				background: #CCCDD0;
				border-radius: 10rpx;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 77rpx;
				margin-top: 82rpx;
			}
			.selectLogin{
				background-color: #3393FF;
			}
		}
	}
	//提示信息
	.hint-text{
		height: 68rpx;
		background: rgba(252,186,6,0.1);
		border-radius: 14rpx;
		font-size: $uni-font-size-base;
		font-weight: 400;
		color: #EE972D;
		line-height: 68rpx;
		padding: 0 27rpx;
		margin-top: 27rpx;
	}
	//协议
	.agremment{
		width: 100%;
		display: flex;
		align-items: flex-start;
		position: fixed;
		bottom: 68rpx;
		left: 30rpx;
		right: 30rpx;
		navigator{
			color: #F1A63F;
			display: inline-block;
		}
		.agremment-text{
			margin-left: 16rpx;
			display: flex;
			align-items: center;
			font-size: 22rpx;
			font-weight: 400;
			color: #333333;
			line-height: 33rpx;
			flex-wrap: wrap;
		}
	}
</style>